<template>
    <Select :value="value" placeholder="选择来源" filterable>
        <Option value="">全部</Option>
        <Option :value="configs.app_id" :key="configs.app_id" :label="(configs.app_name || configs.app_id)+'（本机）'">
            <div v-if="configs.app_name">{{ configs.app_name }}（本机）<span style="font-size: 10px;color:#aaa;margin-left: 5px;">{{ configs.app_id }}</span></div>
            <div v-else>{{ configs.app_id }}</div>
        </Option> 
        <Option v-for="(value, key) in appsBriefData" :key="key" :value="key" :label="value || key">
            <div v-if="value">{{ value }}<span style="font-size: 10px;color:#aaa;margin-left: 5px;">{{ key }}</span></div>
            <div v-else>{{ key }}</div>
        </Option>
    </Select>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "AppSelect",
    props: {
        value: String
    },
    computed: {
        ...mapGetters(["appsBriefData", "configs" ]),
    }
}
</script>